<%@page import="javax.sql.rowset.WebRowSet"%>
<%@page import="finalproject.web.DBTool"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>前台页面</title>
<link rel="stylesheet" href="receptionStyle.css" />
<style>
    /* 定义容器样式，用于包含两个框 */
    .container {
        display: flex; /* 使用弹性盒模型布局 */
        flex-direction: column; /* 设置为垂直布局 */
        -justify-content: center; /* 水平居中 */
        -align-items: center; /* 垂直居中 */
        gap: 0; /* 设置框之间的间隔 */
    }

    .box.first {
         width: 150px; /* 设置框的宽度 */
        height: 100px; /* 设置框的高度 */
        padding: 20px; /* 设置内边距 */
        border: 1px solid #000000; /* 设置边框宽度、样式和颜色 */
        background-color: #ffffff; /* 设置背景颜色 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */   
    }

    
    .box.second {
        width: 150px; /* 设置框的宽度 */
        height: 250px; /* 设置框的高度 */
        padding: 20px; /* 设置内边距 */
        border: 1px solid #000000; /* 设置边框宽度、样式和颜色 */
        background-color: #ffffff; /* 设置背景颜色 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */
    }

    /* 公共边的样式，确保公共边看起来连在一起 */
    .shared-border {
        border-top: 1px solid #000000; /* 设置上边框 */
        border-bottom: 1px solid #000000; /* 设置下边框 */
    }
</style>
</head>
<%
Class.forName("org.mariadb.jdbc.Driver");
Connection conn=DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from `table` ORDER BY num;");
%>
<body>
<header>
      <div class="nav">
			<ul>
				<li><a href="#">XXX2小餐馆</a></li>
				<li><a href="#">点餐状态</a></li>
				<li><a href="#">后厨状态</a></li>
				<li><a href="#">今日订单</a></li>
				<li><a href="#">菜品管理</a></li>
				<li><a href="#">营业额统计</a></li>
				<li><a href="#">当前用户:</a></li>
			</ul>
		</div>
</header>
<%while(rs.next()){ %>
<div class="container">
    <div class="box first shared-border">
        <p>桌1</p>
    </div>
    <div class="box second shared-border">
        <p>鱼香肉丝</p>
    </div>
</div>
<%}; %>
</body>
</html>
.